import {designPage} from "@peryl/react-compose";
import {GridCol, GridRow} from 'plain-design';
import SummaryCardSales from "./summary-card/summary-card-sales";
import './summary-card/summary-card.scss';
import SummaryCardOrderStatistic from "./summary-card/summary-card-order-statistic";
import SummaryCardActivity from "./summary-card/summary-card-activity";
import SummaryCardProdBrowse from "./summary-card/summary-card-browse";
import StoreBrowserCard from "./store-browser-card";
import KeywordAnalysis from "./keyword-analysis";
import KeywordStructure from "./keyword-structure";

export default designPage(() => {
  return () => (
    <div className="pro-data-statistic">
      <GridRow rowGutter="default" gutter="default" className="pro-data-statistic-summary-card-list">
        <GridCol span={6}><SummaryCardSales/></GridCol>
        <GridCol span={6}><SummaryCardProdBrowse/></GridCol>
        <GridCol span={6}><SummaryCardOrderStatistic/></GridCol>
        <GridCol span={6}><SummaryCardActivity/></GridCol>
      </GridRow>
      <StoreBrowserCard/>
      <GridRow rowGutter="default" gutter="default" className="pro-data-statistic-summary-card-list pro-data-statistic-keyword-row" style={{ alignItems: 'stretch' }}>
        <GridCol span={12}>
          <KeywordAnalysis/>
        </GridCol>
        <GridCol span={12}>
          <KeywordStructure/>
        </GridCol>
      </GridRow>
    </div>
  );
});
